<template>
  <div class="container page" style="overflow: hidden">
    <van-nav-bar
        title="打赏记录"
        left-arrow
        @click-left="$router.back()"
    >
      <template #right>
        <i class="van-badge__wrapper iconfont iconfont-menu menuBtn" style="color: #fa59b5; font-size: 24px;"
           @click="showNav = true"/>
      </template>
    </van-nav-bar>
    <form action="/">
      <van-search v-model="username" placeholder="请输入会员名" @search="initData">
        <template #right-icon>
          <span @click="initData">查询</span>
        </template>
      </van-search>
    </form>
    <div class="searchBox" style="">
      <div class="searchDate">
        <div class="left">
          <div class="startTime" @click="showStartTime = true">{{ startTime }}</div>
          <span>~</span>
          <div class="endTime" @click="showEndTime = true">{{ endTime }}</div>
        </div>
        <van-popover v-model="showPopover" ref="popover" placement="bottom" theme="light" overlay
                     @open="onClick">
          <template #reference>
            <div class="datetimerangeBtn" @click="onClick">
              <span style="font-size: .37333rem;">{{ getNowMenu() }}</span>
              <i class="van-badge__wrapper van-icon van-icon-arrow-down"></i>
            </div>
          </template>
          <template #default>
            <div class="datetimerangeList">
              <div class="datetimerangeItem">
                <div class="datetimerangeItemBtn" :class="nowMenu === 1 ? 'datetimerangeItemActiveBtn' : ''" @click="() =>{
                  nowMenu = 1;
                  startDate = new Date();
                  endDate = new Date();
                  endDate.setDate(endDate.getDate() + 1);
                  showPopover = false;
                  initData();
                }">今天
                </div>
              </div>
              <div class="datetimerangeItem">
                <div class="datetimerangeItemBtn" :class="nowMenu === 2 ? 'datetimerangeItemActiveBtn' : ''" @click="() =>{
                  nowMenu = 2;
                  endDate = new Date();
                  let dayOfWeek  = endDate.getDay();
                  endDate.setDate(endDate.getDate() + 1);
                  startDate = new Date();
                  startDate.setDate(endDate.getDate() - dayOfWeek);
                  showPopover = false;
                  initData();
                }">本周
                </div>
              </div>
              <div class="datetimerangeItem">
                <div class="datetimerangeItemBtn" :class="nowMenu === 3 ? 'datetimerangeItemActiveBtn' : ''"
                     @click="() =>{
                  nowMenu = 3;
                  endDate = new Date();
                  let year  = endDate.getFullYear(), month = endDate.getMonth();
                  endDate.setDate(endDate.getDate() + 1);
                  startDate = new Date(year, month, 1);
                  showPopover = false;
                  initData();
                }">本月
                </div>
              </div>
            </div>
          </template>
        </van-popover>
      </div>
    </div>
    <div class="content">
      <div class="container" style="height: calc(100% - 2.62667rem)">
        <van-pull-refresh v-model="refresh" success-text="刷新成功"
                          @refresh="onRefresh" style="height: 100%; overflow-y: scroll">
          <template #default>
            <van-list class="listcontainer" v-model="loading" style="overflow-y: scroll" finished-text="没有更多了"
                      :finished="list.length >= total" @load="getNextData">
              <div class="item" v-for="item in list" :key="item.id">
                <div class="item_cell">
                  <div class="item_left">
                    <div class="item_cell_name">{{ item.userinfo.username }}</div>
                    <div class="item_cell_period">{{ item.expect }} 期</div>
                  </div>
                  <div class="item_right">
                    <div class="item_cell_betMoney">{{ item.is_win === 1 ? item.profit : '' }}</div>
                  </div>
                </div>
                <div class="item_cell">
                  <div class="item_left">
                    <div class="item_cell_playName">{{ item.lottery.name }} - {{ item.type }}</div>
                  </div>
                  <div class="item_right">
                    <div class="item_cell_statusText">
                      <span>
                        <span v-if="item.is_win === 0" style="color: green">待结算 {{ item.money }}</span>
                        <span v-if="item.is_win === 1" style="color: red;">打赏成功 {{ item.money }}</span>
                        <span v-if="item.is_win === 2" style="color: gray">打赏失败 {{ item.money }}</span>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </van-list>
          </template>
        </van-pull-refresh>
      </div>
    </div>
    <div class="navigation" v-if="showNav">
      <div class="lotteryBox">
        <div class="title">
          <div class="titleText">全部任务</div>
        </div>
        <div class="lotteryWrapper">
          <!-- itemDefaultStyle itemLightStyle -->
          <div class="lotteryItem" :class="lid === item.id ? 'itemLightStyle' : 'itemDefaultStyle'"
               v-for="item in serviceList" :key="item.id" @click="lid = item.id">
            <div class="lotteryItemText"><span>{{ item.name }}</span></div>
          </div>
        </div>
      </div>
      <div class="bottomBox">
        <div class="resetBtn" @click="lid = undefined">
          <div class="bottomBtnText">重置</div>
        </div>
        <div class="confirmBtn" @click="initData">
          <div class="bottomBtnText">确定</div>
        </div>
      </div>
    </div>
    <van-popup v-model="showStartTime" :overlay="true" :close-on-click-overlay="false" position="bottom"
               style="height: 30%;">
      <van-datetime-picker
          class="datetimepicker"
          v-model="startDate"
          type="date"
          @cancel="showStartTime = false"
          @confirm="()=>{
            nowMenu = 0;
            initData();
          }"
      />
    </van-popup>
    <van-popup v-model="showEndTime" :overlay="true" :close-on-click-overlay="false" position="bottom"
               style="height: 30%;">
      <van-datetime-picker
          class="datetimepicker"
          v-model="endDate"
          type="date"
          @cancel="showEndTime = false"
          @confirm="()=>{
            nowMenu = 0;
            initData();
          }"
      />
    </van-popup>
  </div>
</template>
<script>
import {subUserRewardList} from "@api/Agent";
import {getServiceList} from "@api/Service";

export default {
  name: "BetList",
  created() {
    this.initService();

    this.startDate = new Date();
    this.startDate.setMonth(this.startDate.getMonth() - 1);

    this.endDate = new Date();
    this.endDate.setDate(this.endDate.getDate() + 1);

    this.initData();

  },
  data: function () {
    return {
      nowMenu: 0,
      showNav: false,
      limit: 10,
      startTime: '',
      endTime: '',
      showStartTime: false,
      showEndTime: false,
      startDate: undefined,
      endDate: undefined,
      showPopover: false,
      active: '',
      loading: false,
      finished: true,
      refresh: false,
      list: [],
      total: 0,
      page: 1,
      serviceList: [],
      lid: undefined,
      username: undefined,
    }
  },
  methods: {
    initService: function () {
      getServiceList().then(v => {
        this.serviceList = v.data;
      })
    },
    initData: function () {
      this.showNav = false;
      this.showStartTime = false;
      this.showEndTime = false;
      this.page = 1;
      this.startTime = this.startDate.format("yyyy-MM-dd");
      this.endTime = this.endDate.format("yyyy-MM-dd");
      subUserRewardList(this.username, this.lid, this.startTime, this.endTime, this.page, this.limit).then(v => {
        this.total = v.data.total;
        this.list = v.data.data;
        this.refresh = false;
        this.loading = false;
      })
    },
    getNextData: function () {
      this.page++;
      subUserRewardList(this.username, this.lid, this.startTime, this.endTime, this.page, this.limit).then(v => {
        this.total = v.data.total;
        this.list = this.list.concat(v.data.data);
      })
    },
    onRefresh: function () {
      this.initData();
    },
    onClick: function () {
      this.showPopover = true;
    },
    getNowMenu: function () {
      switch (this.nowMenu) {
        case 1:
          return '今天';
        case 2:
          return '本周';
        case 3:
          return '本月';
        default:
          return '';
      }
    }
  }
};
</script>
<style scoped>
::v-deep .van-nav-bar__left > i, ::v-deep .van-nav-bar__text, ::v-deep .van-nav-bar__title, ::v-deep .van-cell__title {
  color: var(--van-nav-bar-icon-color);
}

::v-deep .van-tabs__content {
  height: calc(100% - 1.22667rem)
}

::v-deep .van-list__finished-text {
  background-color: #f4ebf3;
}

::v-deep .van-tab {
  color: #f2f2f5
}

::v-deep .van-tab--active {
  color: #fff
}

::v-deep .van-tab__pane {
  height: 100%
}

::v-deep.van-tab__panel {
  height: 100%
}

::v-deep .van-tabs__line {
  background: #fff
}

::v-deep .van-tabs__wrap {
  height: 1.22667rem;
  background: linear-gradient(270deg, #fa59b5, #e38afb)
}

::v-deep.van-list {
  width: 100%
}

::v-deep .van-tabs__nav {
  background-color: transparent;
}

.pull-refresh {
  height: calc(100% - 1.22667rem);
}

.list {
  height: 100%;
  overflow: auto;
  background-color: #fcf0fa
}

.list .van-tab__text {
  color: #fff
}

.list .van-tabs__line {
  background-color: #fff
}

.emptyView {
  background-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.emptyView .emptyViewimg {
  width: 8rem;
  height: 8rem
}

.emptyView .emptyViewText {
  color: #aaa;
  font-size: .37333rem;
  font-weight: 700;
  margin: .53333rem 0
}

.emptyView .emptyViewBtn {
  display: flex;
  width: 80%;
  height: 1.2rem;
  background: linear-gradient(270deg, #fa59b5, #e38afb);
  align-items: center;
  justify-content: center;
  border-radius: .16rem
}

.emptyView .emptyViewBtnText {
  font-size: .42667rem;
  font-weight: 700;
  color: #000
}

.listcontainer {
  color: #fcf0fa;
  background-color: #f5dcf1
}

.listcontainer .item {
  border-bottom: .02667rem solid #f2f2f5;
  margin: 0 .26667rem;
  padding: .4rem 0
}

.listcontainer .item .item_cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: .13333rem 0
}

.listcontainer .item .item_cell .item_left {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center
}

.listcontainer .item .item_cell .item_cell_betMoney {
  color: #ff253f;
  font-size: .37333rem
}

.listcontainer .item .item_cell .item_cell_name {
  color: #fa59b5;
  font-size: .42667rem
}

.listcontainer .item .item_cell .item_cell_period {
  font-size: .32rem;
  margin: 0 .13333rem;
  color: #000
}

.listcontainer .item .item_cell .item_cell_playName {
  color: #000;
  font-size: .37333rem
}

.listcontainer .item .item_cell .item_cell_statusText {
  font-size: .42667rem
}

.container .tabs, .container {
  height: 100%
}

.container {
  bottom: 0;
}

.container .nav {
  background: linear-gradient(270deg, #fff, #fff)
}

.container .nav .tabs {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center
}

.container .nav .tabs .tab {
  width: 1.86667rem;
  height: .96rem;
  display: flex;
  justify-content: center;
  align-items: center
}

.container .nav .tabs .tab .text {
  font-size: .48rem
}

.container .nav .tabs .tab .activeText {
  color: #e38afb;
  font-weight: 700
}

.container .nav .tabs .tab .inactiveText {
  color: #cdccce
}

.container .nav .tabs .underLine {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: .26667rem;
  height: .08rem;
  border-radius: .08rem;
  background-color: #fff;
  transition: all .2s ease-in-out 0s
}

.container .nav .tabs .underLineStatus0 {
  margin-left: -1.06667rem
}

.container .nav .tabs .underLineStatus1 {
  margin-left: .8rem
}

.container .nav .menuBtn {
  color: #e38afb
}

.container .content {
  height: calc(100% - 1.22667rem)
}


.container .datetimepicker {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: #fcf0fa
}

.container .datetimepicker .van-picker__columns {
  background: #fcf0fa
}

.container .datetimepicker .van-picker__mask {
  background: transparent
}

.container .datetimepicker .van-ellipsis {
  color: #000
}

.container .datetimepicker .van-picker__toolbar {
  background-color: #f2f2f5
}

.container .datetimepicker .van-picker-column__item--selected {
  margin: auto;
  width: 100%;
  border-radius: 0;
  background-color: #f2f2f5
}

.container .datetimepicker .handleBox {
  padding-left: .53333rem;
  padding-right: .53333rem
}

.container .datetimepicker .handleBox .handleText {
  font-size: .42667rem
}

.container .datetimepicker .handleBox .confirmText {
  color: #fa59b5
}

.container .mask1 {
  background-color: rgba(0, 0, 0, .4)
}

.container .mask2 {
  background-color: rgba(0, 0, 0, .5);
  z-index: 12
}

.container .navigation {
  position: fixed;
  right: 0;
  top: 0;
  padding-left: .26667rem;
  padding-right: .26667rem;
  height: 100%;
  width: 80%;
  background-color: #fcf0fa;
  color: #fa59b5;
  z-index: 10;
  overflow-y: auto;
  box-shadow: .8rem 0 .8rem .8rem hsla(0, 0%, 88.2%, .2);
  -webkit-overflow-scrolling: touch
}

.container .navigation .timeBox {
  padding-bottom: .53333rem
}

.container .navigation .timeBox .title {
  display: flex;
  height: 1.33333rem;
  justify-content: flex-start;
  align-items: center
}

.container .navigation .timeBox .title .titleText {
  font-size: .48rem
}

.container .navigation .timeBox .datetimepickerBtnBox {
  display: flex;
  flex-direction: row;
  justify-content: center
}

.container .navigation .timeBox .datetimepickerBtnBox .datetimepickerBtnDashes {
  display: flex;
  align-items: center;
  font-size: .42667rem;
  margin-left: 2%;
  margin-right: 2%
}

.container .navigation .timeBox .datetimepickerBtnBox .datetimepickerBtn {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border: .02667rem solid #fff;
  border-radius: .16rem;
  height: .96rem
}

.container .navigation .timeBox .datetimepickerBtnBox .datetimepickerBtn .datetimepickerBtnText {
  font-size: .42667rem
}

.container .navigation .lotteryBox {
  border-top: .02667rem solid #f2f2f5
}

.container .navigation .lotteryBox .title {
  display: flex;
  height: 1.33333rem;
  justify-content: flex-start;
  align-items: center
}

.container .navigation .lotteryBox .title .titleText {
  font-size: .48rem
}

.container .navigation .lotteryBox .lotteryWrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start
}

.container .navigation .lotteryBox .lotteryWrapper .lotteryItem {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .10667rem;
  height: .96rem;
  margin-bottom: 2%;
  margin-right: 2%
}

.container .navigation .lotteryBox .lotteryWrapper .lotteryItem .lotteryItemText {
  font-size: .37333rem;
  padding-left: .13333rem;
  padding-right: .13333rem
}

.container .navigation .lotteryBox .lotteryWrapper .itemLightStyle {
  color: #fcf0fa;
  background: #fa59b5
}

.container .navigation .lotteryBox .lotteryWrapper .itemDefaultStyle {
  color: #979799;
  border: .02667rem solid #979799
}

.container .navigation .bottomBox {
  position: absolute;
  bottom: .53333rem;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between
}

.container .navigation .bottomBox .resetBtn {
  border: .02667rem solid #fa59b5
}

.container .navigation .bottomBox .resetBtn .bottomBtnText {
  color: #fa59b5
}

.container .navigation .bottomBox .confirmBtn {
  background-color: #fa59b5
}

.container .navigation .bottomBox .confirmBtn .bottomBtnText {
  color: #fcf0fa
}

.container .navigation .bottomBox .confirmBtn, .container .navigation .bottomBox .resetBtn {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  border-radius: .58667rem;
  height: 1.17333rem;
  margin-left: .26667rem;
  margin-right: .26667rem
}

.container .navigation .bottomBox .confirmBtn .bottomBtnText, .container .navigation .bottomBox .resetBtn .bottomBtnText {
  font-size: .42667rem;
  font-weight: 500
}

.sidebar-slide-right-enter-from, .sidebar-slide-right-leave-to {
  opacity: 0;
  transform: translate(50%) !important;
  transition: transform .35s, opacity .35s
}

.sidebar-slide-right-enter-to, .sidebar-slide-right-leave-from {
  transition: transform .35s, opacity .35s
}

.searchBox {
  padding: .26667rem;
  background: #f4ebf3;
  z-index: 1000;
}

.searchBox .searchDate {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center
}

.searchBox .searchDate .left {
  display: flex;
  flex-direction: row;
  align-items: center
}

.searchBox .searchDate .left .endTime, .searchBox .searchDate .left .startTime {
  border: 0;
  border-radius: 1.06667rem;
  padding: .26667rem .66667rem;
  color: #979799;
  background-color: #f5dcf1
}

.searchBox .searchDate .left span {
  margin: 0 .13333rem
}

.searchBox .searchDate .van-icon {
  margin-left: .23333rem;
  color: #999;
  font-size: .37333rem
}

.datetimerangeList {
  width: 1.6rem;
  color: #000
}

.datetimerangeList .datetimerangeItem {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: .10667rem;
  padding-bottom: .10667rem;
  margin-top: .02667rem;
  background-color: #f2f2f5
}

.datetimerangeList .datetimerangeItem .datetimerangeItemBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: .32rem;
  padding: .16rem .32rem;
  border-radius: .16rem;
  color: #000
}

.datetimerangeList .datetimerangeItem .datetimerangeItemActiveBtn {
  color: #fcf0fa;
  background-color: #e38afb
}

</style>
